<template> 
  <div class="container">
    <Category title="美食" >
      <img src="https://www.lingchen1642.top/content/images/size/w2000/2021/12/1-1.jpg">
    </Category> 

    <Category title="游戏" >
      <ul>
        <li v-for="(g, index) in games" :key="index">{{g}}</li> 
      </ul>
    </Category> 

    <Category title="电影" >
      <video controls src="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=102&spm_id_from=pageDriver"></video>
    </Category>
  </div> 
</template>

<script>
 
  import Category from './components/Category' 
  
  export default {
    name:'App', 
    components:{Category},
    data(){
      return {
        foods:['火锅', '烧烤', '小龙虾', '牛排'],
        games:['刺激战场', '穿越火线', '开心消消乐', '英雄联盟'],
        films:['《黑客帝国》', '《功夫》', '《无双》', '《战狼》'],
      }
    }
  }
</script>

<style>
  .container{
    display: flex;
    justify-content: space-around;
  }
  img, video{
    width: 100%;
  }
</style>
 